<template>
  <view class="page">
    <view class="tigcard">
      <image class="img" src="../../../static/images/icon/success.png" mode=""></image>
      <view class="">
        <view class="success">
          预约成功
        </view>
        <view class="tip">
          预约成功占位占位占位预约信息预约信息信息
        </view>
      </view>
    </view>
    
    <view class="tcard">
      <view class="title">
        体检信息
      </view>
      <view class="tform">
        <view class="tform-item">
          <view class="label">
            体检人
          </view>
          <view class="value">
            xx
          </view>
        </view>
        <view class="tform-item">
          <view class="label">
            体检地址
          </view>
          <view class="value">
            xx
          </view>
        </view>
        <view class="tform-item">
          <view class="label">
            套餐名称
          </view>
          <view class="value">
            xx
          </view>
        </view>
        <view class="tform-item">
          <view class="label">
            自选项目
          </view>
          <view class="value">
            xx
          </view>
        </view>
        <view class="tform-item">
          <view class="label">
            体检时间
          </view>
          <view class="value">
            xx
          </view>
        </view>
        <view class="tform-item">
          <view class="label">
            体检项明细
          </view>
          <view class="mingxi">
            项目明细 >
          </view>
        </view>
      </view>
    </view>
    
    <view class="tcard" style="margin-bottom: 120upx;">
      <view class="title">
        订单信息
      </view>
      <view class="tform">
        <view class="tform-item">
          <view class="label">
            订单类型
          </view>
          <view class="value">
            个检
          </view>
        </view>
        <view class="tform-item">
          <view class="label">
            订单金额
          </view>
          <view class="value">
            ￥123
          </view>
        </view>
        <view class="tform-item">
          <view class="label">
            订单编号
          </view>
          <view class="value">
            个检
          </view>
        </view>
        <view class="tform-item">
          <view class="label">
            下单时间
          </view>
          <view class="value">
            个检
          </view>
        </view>
      </view>
    </view>
    
    <view class="pay">
      <view class="light btn">
        申请退款
      </view>
      <view class="btn" @click="toConfirm">
        修改预约时间
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        
      }
    },
    methods: {
      
    }
  }
</script>

<style lang="scss" scoped>
.tigcard {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32upx;
  background-color: #FFF;
  border-radius: 8upx;
  margin-bottom: 24upx;
  .img {
    width: 156upx;
    height: 156upx;
    margin-right: 24upx;
    flex-shrink: 0;
  }
  .success {
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 36upx;
    color: #366AA4;
    line-height: 54upx;
  }
  .tip {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28upx;
    color: rgba(0,0,0,0.7);
    line-height: 42upx;
  }
}
.mingxi {
  color: $theme-color;
}
.pay {
  width: 100vw;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 108upx;
  padding: 0 32upx;
  box-shadow: 0px -8px 76px 22px rgba(227,237,255,0.58);
  background-color: #FFF;
  .btn {
    width: 260upx;
    height: 64upx;
    background: #366AA4;
    border-radius: 64upx;
    text-align: center;
    line-height: 64upx;
    color: #FFF;
  }
  .light {
    background: transparent;
    border: 1px solid $theme-color;
    color: $theme-color;
  }
}
</style>
